[#ftl]

[@define "agile.AnimationKeyframeEditor" "agile.FloatingPane"]
  	name:"AnimationKeyframeEditor"	
 	[#assign contentTemplateString][#compress]
	<div class="content" data-dojo-type="dijit/layout/ContentPane">
		<div data-dojo-attach-point="keyframeStep" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props='value:0,minimum:0,maximum:100,discreteValues:11,intermediateChanges:true,showButtons:false,style:"width:400px"'>
		<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"topDecoration",style:"height:1.5em;font-size:75%;color:gray;"'>
		    <li></li><li>20%</li><li>40%</li><li>60%</li><li>80%</li><li></li>
		</ol>
		<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration",count:11,style:"height:5px;"'>  </div>
		<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration",style:"height:1em;font-size:75%;color:gray;"'>
		    <li>0%</li><li>50%</li><li>100%</li>
		</ol>
		</div>	
		
		<div data-dojo-attach-point="keyframeStyle" data-dojo-type="agile.CssRuleEditor"></div>
		
	</div>		
	[/#compress][/#assign]	
 	,contentTemplateString:"${contentTemplateString?js_string}"	
 	,constructor:function(){ 
// 		this.helpText = agile.i18n("metadata_help",null,"Configurate the widget's properties");
	 	this.subscribe("agile.widget.selected",function(widget){
	 		this.setSubtitle(widget==null?"&nbsp;":widget.getDescription());
		});	 
	 	
	 	this.subscribe("agile.widget.animation",function(widget){
	 		if(widget){	 			
	 			
				style.set(this.domNode,{display:"block"});
				this.showContentPane();				
	 		}else{	 			
				style.set(this.domNode,{display:"none"});				
	 		}
	 	});
	 	
//	 	aspect.after(this,"startup",lang.hitch(this,function(){
//			//subscribe from MetadataAware:apply style to current key frame
//			this.subscribe("style-changed",function(ownerWidget,htmlName,value){
//				if(htmlName != "animation" && htmlName != "animation-play-state"){
//					this.keyframeStyle.addOption([{label:htmlName +":" + value,value:htmlName}]);				
//				}
//			});
//	 	}));
 	}

 	,getDefaultLocation:function(){
		return {left:"450px",top:"110px"};		 
	}
 	,getResizableSize:function(){
		return {height:"350px",width:"560px"};		 
	}
[/@]
